<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<CustomNavbar title="编辑个人信息">
			<template #right>
				<text class="save-link" @click="saveProfile">保存</text>
			</template>
		</CustomNavbar>

		<!-- 页面内容 -->
		<view class="content">
			<!-- 头像编辑区域 -->
			<view class="avatar-section">
				<view class="section-title">
					<text class="title-text">个人头像</text>
					<text class="title-icon">📷</text>
				</view>
				
				<view class="avatar-container">
					<view class="avatar-preview" @click="chooseAvatar">
						<image v-if="editForm.avatarUrl" :src="editForm.avatarUrl" class="preview-image" mode="aspectFill"></image>
						<text v-else class="preview-text">{{editForm.avatarText}}</text>
						<view class="avatar-overlay">
							<text class="overlay-text">点击更换</text>
						</view>
					</view>
					<view class="avatar-options">
						<text class="options-title">快速选择：</text>
						<view class="options-grid">
							<view class="avatar-option" @click="setDefaultAvatar('👤')">
								<text class="option-emoji">👤</text>
							</view>
							<view class="avatar-option" @click="setDefaultAvatar('🐱')">
								<text class="option-emoji">🐱</text>
							</view>
							<view class="avatar-option" @click="setDefaultAvatar('🐶')">
								<text class="option-emoji">🐶</text>
							</view>
							<view class="avatar-option" @click="setDefaultAvatar('🐰')">
								<text class="option-emoji">🐰</text>
							</view>
							<view class="avatar-option" @click="setDefaultAvatar('🐿️')">
								<text class="option-emoji">🐿️</text>
							</view>
							<view class="avatar-option" @click="setDefaultAvatar('🦊')">
								<text class="option-emoji">🦊</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 基本信息编辑 -->
			<view class="info-section">
				<view class="section-title">
					<text class="title-text">基本信息</text>
					<text class="title-icon">✏️</text>
				</view>
				
				<view class="form-card">
					<view class="form-item">
						<text class="form-label">昵称</text>
						<input 
							class="form-input" 
							v-model="editForm.name" 
							placeholder="请输入昵称" 
							maxlength="20"
							:focus="false"
							confirm-type="done"
							@input="onNameInput"
							@focus="onInputFocus"
						/>
					</view>
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="contact-section">
				<view class="section-title">
					<text class="title-text">联系方式</text>
					<text class="title-icon">📞</text>
				</view>
				
				<view class="form-card">
					<view class="form-item">
						<text class="form-label">邮箱地址</text>
						<input 
							class="form-input" 
							v-model="editForm.email" 
							placeholder="请输入邮箱地址" 
							type="email"
							:focus="false"
							confirm-type="done"
						/>
					</view>
					
					<view class="form-item">
						<text class="form-label">手机号码</text>
						<input 
							class="form-input" 
							v-model="editForm.phone" 
							placeholder="请输入手机号码" 
							type="number" 
							maxlength="11"
							:focus="false"
							confirm-type="done"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { userAPI, fileAPI } from '@/utils/api.js'
	import CustomNavbar from '@/components/CustomNavbar.vue'
	
	export default {
		components: {
			CustomNavbar
		},
		data() {
			return {
				editForm: {
					name: '记账达人',
					desc: '让每一笔账都清清楚楚',
					avatarText: '👤',
					avatarUrl: '',
					tags: ['记账达人', '理财新手'],
					email: '',
					phone: ''
				}
			}
		},
		onLoad() {
			this.loadUserInfo()
		},
		onReady() {
			// 确保数据已经初始化
			console.log('页面准备完成，当前数据：', this.editForm)
		},
		methods: {
			// 加载用户信息
			async loadUserInfo() {
				try {
					// 从本地存储或后端获取用户信息
					const savedUserInfo = uni.getStorageSync('user_profile')
					if (savedUserInfo) {
						this.editForm = { ...this.editForm, ...savedUserInfo }
					}
					
					// 尝试从后端获取最新信息
					const userProfile = await userAPI.getProfile()
					if (userProfile) {
						const tags = userProfile.tags ? userProfile.tags.split(',').filter(tag => tag.trim()) : []
						
						this.editForm = {
							name: userProfile.nickname || '记账达人',
							desc: userProfile.description || '让每一笔账都清清楚楚',
							avatarText: userProfile.avatar ? null : '👤',
							avatarUrl: userProfile.avatar || '',
							tags: tags.length > 0 ? tags : ['记账达人', '理财新手'],
							email: userProfile.email || '',
							phone: userProfile.phone || ''
						}
					}
				} catch (e) {
					console.log('加载用户信息失败:', e)
				}
			},

			// 选择头像
			async chooseAvatar() {
				try {
					const res = await new Promise((resolve, reject) => {
						uni.chooseImage({
							count: 1,
							sizeType: ['compressed'],
							sourceType: ['album', 'camera'],
							success: resolve,
							fail: reject
						})
					})
					
					if (res.tempFilePaths && res.tempFilePaths.length > 0) {
						const filePath = res.tempFilePaths[0]
						
						uni.showLoading({
							title: '上传中...'
						})
						
						try {
							const uploadResult = await fileAPI.uploadAvatar(filePath)
							
							if (uploadResult.success) {
								this.editForm.avatarUrl = uploadResult.fileUrl
								this.editForm.avatarText = ''
								
								uni.showToast({
									title: '头像上传成功',
									icon: 'success'
								})
								// 立即保存个人信息，包括新的头像URL
								await this.saveProfile(true) // 传入true表示是头像上传后的自动保存
							} else {
								throw new Error(uploadResult.message)
							}
						} catch (uploadError) {
							uni.showToast({
								title: '头像上传失败: ' + uploadError.message,
								icon: 'none'
							})
						} finally {
							uni.hideLoading()
						}
					}
				} catch (error) {
					console.log('选择头像失败:', error)
				}
			},

			// 设置默认头像
			setDefaultAvatar(emoji) {
				this.editForm.avatarText = emoji
				this.editForm.avatarUrl = ''
				
				uni.vibrateShort()
				uni.showToast({
					title: '头像已更换',
					icon: 'success',
					duration: 1000
				})
			},

			// 预览头像
			previewAvatar() {
				if (this.editForm.avatarUrl) {
					uni.previewImage({
						urls: [this.editForm.avatarUrl],
						current: this.editForm.avatarUrl
					})
				} else {
					uni.showToast({
						title: '当前使用表情头像',
						icon: 'none'
					})
				}
			},

			// 删除当前头像
			deleteCurrentAvatar() {
				if (!this.editForm.avatarUrl) {
					uni.showToast({
						title: '当前没有上传的头像',
						icon: 'none'
					})
					return
				}

				uni.showModal({
					title: '删除头像',
					content: '确定要删除当前头像吗？删除后将使用默认表情头像。',
					success: async (res) => {
						if (res.confirm) {
							try {
								// 从URL中提取文件名
								const fileName = this.editForm.avatarUrl.split('/').pop()
								
								// 调用删除API
								await fileAPI.deleteAvatar(fileName)
								
								// 清空头像URL，设置默认表情
								this.editForm.avatarUrl = ''
								this.editForm.avatarText = '👤'
								
								uni.showToast({
									title: '头像删除成功',
									icon: 'success'
								})
							} catch (error) {
								console.log('删除头像失败:', error)
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},

			// 移除标签
			removeTag(index) {
				uni.showModal({
					title: '确认删除',
					content: `确定要删除标签"${this.editForm.tags[index]}"吗？`,
					success: (res) => {
						if (res.confirm) {
							this.editForm.tags.splice(index, 1)
							uni.vibrateShort()
						}
					}
				})
			},

			// 跳转到添加标签页面
			goToAddTag() {
				const tagsData = encodeURIComponent(JSON.stringify(this.editForm.tags))
				uni.navigateTo({
					url: `/pages/add-tag/add-tag?currentTags=${tagsData}`
				})
			},

			// 保存个人信息
			async saveProfile(isAutoSave = false) {
				// 验证必填字段
				if (!isAutoSave && !this.editForm.name.trim()) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
					return
				}
				
				// 验证邮箱格式
				if (!isAutoSave && this.editForm.email && !this.validateEmail(this.editForm.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					})
					return
				}
				
				// 验证手机号格式
				if (!isAutoSave && this.editForm.phone && !this.validatePhone(this.editForm.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return
				}
				
				if (!isAutoSave) {
					uni.showLoading({
						title: '保存中...'
					})
				}

				try {
					// 保存到后端
					const requestData = {
						name: this.editForm.name,
						desc: this.editForm.desc,
						avatarText: this.editForm.avatarText,
						avatarUrl: this.editForm.avatarUrl,
						tags: this.editForm.tags,
						email: this.editForm.email,
						phone: this.editForm.phone
					}
					
					await userAPI.updateDetailedProfile(requestData)
					
					// 保存到本地存储
					uni.setStorageSync('user_profile', this.editForm)
					
					if (!isAutoSave) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						
						// 延迟返回，让用户看到成功提示
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
					
				} catch (error) {
					console.log('保存个人信息失败:', error)
					if (!isAutoSave) {
						uni.showToast({
							title: '保存失败，请重试',
							icon: 'none'
						})
					}
				} finally {
					if (!isAutoSave) {
						uni.hideLoading()
					}
				}
			},

			// 取消编辑
			cancelEdit() {
				uni.showModal({
					title: '确认取消',
					content: '确定要放弃当前的修改吗？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
			},

			// 验证邮箱格式
			validateEmail(email) {
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
				return emailRegex.test(email)
			},

			// 验证手机号格式
			validatePhone(phone) {
				const phoneRegex = /^1[3-9]\d{9}$/
				return phoneRegex.test(phone)
			},

			// 调试方法
			onNameInput(e) {
				console.log('昵称输入事件：', e.detail.value)
				this.editForm.name = e.detail.value
			},

			onInputFocus(e) {
				console.log('输入框获得焦点')
			}
		},
		
		// 监听页面返回事件
		onUnload() {
			// 页面卸载时的处理
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';
	
	.container {
		background: $cute-gradient-bg;
		min-height: 100vh;
		padding-bottom: 140rpx; // 为底部操作区域预留空间
		position: relative;
	}
	
	.content {
		padding: 30rpx;
		// 修复顶部间距计算，确保不与导航栏重叠
		padding-top: calc(var(--status-bar-height) + 88rpx + 30rpx);
		margin-top: 0;
	}
	
	/* 导航栏右侧保存链接 */
	.save-link {
		font-size: 28rpx;
		color: $cute-primary;
		font-weight: 600;
		padding: 12rpx 20rpx;
		border-radius: 20rpx;
		background: rgba(144, 238, 144, 0.1);
		border: 2rpx solid $cute-primary;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		
		&:hover {
			background: $cute-primary;
			color: white;
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 20rpx rgba(144, 238, 144, 0.3);
		}
		
		&:active {
			transform: translateY(0) scale(0.95);
		}
	}
	
	/* 通用区域样式 */
	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
		padding: 0 10rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: 600;
		color: $cute-text-primary;
	}
	
	.title-icon {
		font-size: 28rpx;
	}
	
	/* 头像编辑区域 */
	.avatar-section {
		margin-bottom: 40rpx;
	}
	
	.avatar-container {
		background: white;
		border-radius: 30rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 8rpx 30rpx rgba(144, 238, 144, 0.12);
		border: 1rpx solid rgba(144, 238, 144, 0.2);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 6rpx;
			background: $cute-gradient-primary;
		}
	}
	
	.avatar-preview {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background: $cute-gradient-accent;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		cursor: pointer;
		overflow: hidden;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 12rpx 40rpx rgba(255, 182, 193, 0.2);
		border: 4rpx solid white;
		margin: 0 auto 40rpx;
		
		&:hover {
			transform: scale(1.08) rotate(-3deg);
			box-shadow: 0 20rpx 60rpx rgba(255, 182, 193, 0.4);
			border-color: $cute-primary;
		}
		
		&:active {
			transform: scale(0.95);
		}
		
		&::before {
			content: '';
			position: absolute;
			top: -4rpx;
			left: -4rpx;
			right: -4rpx;
			bottom: -4rpx;
			border-radius: 50%;
			background: $cute-gradient-primary;
			z-index: -1;
			opacity: 0;
			transition: opacity 0.3s;
		}
		
		&:hover::before {
			opacity: 1;
		}
	}
	
	.preview-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.preview-text {
		font-size: 80rpx;
		color: white;
	}
	
	.avatar-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s;
		border-radius: 50%;
	}
	
	.avatar-preview:hover .avatar-overlay {
		opacity: 1;
	}
	
	.overlay-text {
		color: white;
		font-size: 22rpx;
		font-weight: 500;
	}
	
	.avatar-options {
		text-align: center;
	}
	
	.options-title {
		display: block;
		font-size: 26rpx;
		color: $cute-text-secondary;
		margin-bottom: 20rpx;
	}
	
	.options-grid {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 15rpx;
	}
	
	.avatar-option {
		width: 60rpx;
		height: 60rpx;
		background: $cute-bg-primary;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.3s;
		border: 2rpx solid $cute-border;
		
		&:hover {
			background: $cute-primary;
			transform: scale(1.1) rotate(5deg);
			border-color: $cute-primary;
		}
		
		&:active {
			transform: scale(0.9);
		}
	}
	
	.option-emoji {
		font-size: 32rpx;
	}
	
	/* 头像操作按钮 */
	.avatar-actions {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		margin: 30rpx 0;
	}
	
	.action-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		padding: 15rpx 25rpx;
		background: $cute-bg-primary;
		border: 2rpx solid $cute-border;
		border-radius: 15rpx;
		cursor: pointer;
		transition: all 0.3s;
		min-width: 100rpx;
		
		&:hover {
			background: $cute-primary;
			border-color: $cute-primary;
			transform: translateY(-2rpx);
			
			.action-icon,
			.action-text {
				color: white;
			}
		}
		
		&:active {
			transform: scale(0.95);
		}
	}
	
	.action-icon {
		font-size: 24rpx;
		color: $cute-text-secondary;
		transition: color 0.3s;
	}
	
	.action-text {
		font-size: 22rpx;
		color: $cute-text-secondary;
		transition: color 0.3s;
	}
	
	/* 表单卡片 */
	.info-section, .contact-section {
		margin-bottom: 40rpx;
	}
	
	.form-card {
		background: white;
		border-radius: 30rpx;
		padding: 35rpx;
		box-shadow: 0 8rpx 30rpx rgba(144, 238, 144, 0.12);
		border: 1rpx solid rgba(144, 238, 144, 0.2);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4rpx;
			background: $cute-gradient-accent;
		}
	}
	
	.form-item {
		margin-bottom: 35rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.form-label {
		display: block;
		font-size: 26rpx;
		color: $cute-text-secondary;
		margin-bottom: 10rpx;
		font-weight: 500;
	}
	
	.form-input, .form-textarea {
		width: 100%;
		padding: 25rpx 30rpx;
		border: 2rpx solid $cute-border;
		border-radius: $cute-border-radius;
		font-size: 30rpx;
		background: white;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-sizing: border-box;
		color: $cute-text-primary;
		position: relative;
		z-index: 10;
		min-height: 90rpx;
		line-height: 1.5;
		box-shadow: 0 2rpx 8rpx rgba(144, 238, 144, 0.1);
		
		&:focus {
			border-color: $cute-primary;
			background: white;
			outline: none;
			box-shadow: 0 0 0 8rpx rgba(144, 238, 144, 0.12), 0 8rpx 25rpx rgba(144, 238, 144, 0.15);
			transform: translateY(-2rpx);
			z-index: 20;
		}
		
		&:hover:not(:focus) {
			border-color: $cute-primary-light;
			box-shadow: 0 4rpx 15rpx rgba(144, 238, 144, 0.1);
		}
		
		&::placeholder {
			color: $cute-text-tertiary;
			font-size: 28rpx;
		}
	}
	
	.form-textarea {
		height: 150rpx;
		resize: none;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}
	
	/* 标签区域 */
	.tags-section {
		margin-bottom: 40rpx;
	}
	
	.tags-card {
		background: white;
		border-radius: 30rpx;
		padding: 35rpx;
		box-shadow: 0 8rpx 30rpx rgba(144, 238, 144, 0.12);
		border: 1rpx solid rgba(144, 238, 144, 0.2);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4rpx;
			background: linear-gradient(135deg, #FFB6C1, #FF69B4);
		}
	}
	
	.current-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		margin-bottom: 20rpx;
	}
	
	.tag-item {
		background: $cute-gradient-accent;
		color: white;
		padding: 12rpx 20rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 24rpx;
		font-weight: 500;
		box-shadow: $cute-button-shadow;
		transition: all 0.3s;
		
		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 25rpx rgba(255, 182, 193, 0.3);
		}
	}
	
	.tag-text {
		font-size: 24rpx;
	}
	
	.tag-delete {
		cursor: pointer;
		font-size: 20rpx;
		opacity: 0.8;
		transition: opacity 0.3s;
		width: 20rpx;
		height: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		
		&:hover {
			opacity: 1;
			background: rgba(255, 255, 255, 0.2);
		}
	}
	
	.tag-add {
		background: $cute-bg-primary;
		color: $cute-text-secondary;
		padding: 12rpx 20rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		cursor: pointer;
		transition: all 0.3s;
		border: 2rpx dashed $cute-border;
		
		&:hover {
			background: $cute-primary;
			color: white;
			border-color: $cute-primary;
			border-style: solid;
		}
	}
	
	.add-icon {
		font-size: 20rpx;
		font-weight: bold;
	}
	
	.add-text {
		font-size: 24rpx;
	}
	
	.tags-tip {
		text-align: center;
		padding: 15rpx;
		background: $cute-bg-primary;
		border-radius: 10rpx;
	}
	
	.tip-text {
		font-size: 22rpx;
		color: $cute-text-tertiary;
	}
	
	/* 底部操作区域 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
		padding: 25rpx 30rpx;
		padding-bottom: calc(25rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid rgba(144, 238, 144, 0.2);
		display: flex;
		gap: 20rpx;
		box-shadow: 0 -8rpx 30rpx rgba(144, 238, 144, 0.15);
	}
	
	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 25rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		font-size: 30rpx;
		font-weight: 600;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
			transition: left 0.6s;
		}
		
		&:active::before {
			left: 100%;
		}
		
		&.cancel-btn {
			background: linear-gradient(135deg, #f8f9fa, #e9ecef);
			color: $cute-text-secondary;
			border: 2rpx solid rgba(144, 238, 144, 0.3);
			box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
			
			&:hover {
				background: linear-gradient(135deg, #e9ecef, #dee2e6);
				transform: translateY(-3rpx);
				box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
			}
		}
		
		&.save-btn {
			background: $cute-gradient-primary;
			color: white;
			box-shadow: 0 6rpx 20rpx rgba(144, 238, 144, 0.3);
			
			&:hover {
				transform: translateY(-3rpx);
				box-shadow: 0 10rpx 35rpx rgba(144, 238, 144, 0.4);
			}
		}
		
		&:active {
			transform: translateY(-1rpx) scale(0.98);
		}
	}
	
	.btn-icon {
		font-size: 24rpx;
	}
	
	.btn-text {
		font-size: 28rpx;
	}
	
	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.content {
			padding: 20rpx;
			padding-top: calc(var(--status-bar-height) + 88rpx + 20rpx);
		}
		
		.avatar-container, .form-card, .tags-card {
			padding: 25rpx 20rpx;
		}
		
		.avatar-preview {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 30rpx;
		}
		
		.options-grid {
			gap: 10rpx;
		}
		
		.avatar-option {
			width: 50rpx;
			height: 50rpx;
		}
		
		.option-emoji {
			font-size: 28rpx;
		}
		
		.form-input, .form-textarea {
			padding: 20rpx 25rpx;
			font-size: 28rpx;
		}
		
		.section-title {
			padding: 0 5rpx;
			margin-bottom: 20rpx;
		}
		
		.title-text {
			font-size: 30rpx;
		}
		
		.bottom-actions {
			padding: 20rpx 25rpx;
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		}
		
		.action-btn {
			height: 80rpx;
			font-size: 28rpx;
		}
	}
	
	/* 超小屏幕优化 */
	@media (max-width: 600rpx) {
		.content {
			padding: 15rpx;
			padding-top: calc(var(--status-bar-height) + 88rpx + 15rpx);
		}
		
		.avatar-preview {
			width: 140rpx;
			height: 140rpx;
		}
		
		.preview-text {
			font-size: 60rpx;
		}
		
		.current-tags {
			gap: 10rpx;
		}
		
		.tag-item {
			padding: 8rpx 15rpx;
			font-size: 22rpx;
		}
		
		.bottom-actions {
			gap: 15rpx;
		}
	}
</style>
